<template>
  <div class="user">
    <el-form label-position="left" ref="ruleFormRef" :model="fromData" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="学习目的" prop="name">
            <el-input v-model="fromData.name"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="学习内容" prop="content">
            <el-input v-model="fromData.content"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学习地点" prop="place">
            <el-select
                v-model="fromData.place"
                placeholder="Select"
                style="width: 240px"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <div>
            <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <div>
      <h1>学习计划表</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="150"/>
        <el-table-column prop="name" label="学习目标"/>
        <el-table-column prop="content" label="学习内容"/>
        <el-table-column prop="place" label="学习地点"/>
        <el-table-column prop="state" label="完成状态">
          <template #default="scope">
            <el-switch v-model="scope.row.state"/>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="danger" size="small" @click="deleteItem(scope)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue";
import type {FormInstance} from "element-plus";
//表单dom
const ruleFormRef = ref<FormInstance>()
//验证规则
const rules = reactive({
  name: [
    {required: true, message: '请输入学习目标', trigger: 'blur'},
  ],
  content: [
    {required: true, message: '请输入学习内容', trigger: 'blur'},
  ],
  place: [
    {required: true, message: '请选择学习地点', trigger: 'blur'},
  ],
})

interface userType {
  id: number,
  name: string,
  content: string,
  place: string,
  state: boolean
}

//输入框数据
const fromData = ref<userType>({
  id: 0,
  name: "",
  content: "",
  place: "",
  state: false
})
//表格数据
const tableData = ref<userType[]>([
  {
    id: 0,
    name: "小乔大王",
    content: "成为大王",
    place: "图书馆",
    state: false
  }
])
//下拉框
const options = [
  {
    value: '自习室',
    label: '自习室',
  },
  {
    value: '操场',
    label: '操场',
  },
  {
    value: '图书馆',
    label: '图书馆',
  },
]
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      fromData.value.id = tableData.value[tableData.value.length - 1].id + 1
      console.log(fromData.value)
      tableData.value.unshift({...fromData.value})
      formEl.resetFields()
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//删除
const deleteItem = (scope: any) => {
  if (scope.row.state) {
    tableData.value.splice(scope.$index, 1)
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
  } else {
    ElMessage({
      message: '未完成该计划',
      type: "warning",
    })
  }
}
</script>
<style scoped>
.user {
  padding: 10px;
  width: 100%;
  height: 100%;
}
</style>